<ion-header [translucent]="true">
  <ion-toolbar
    style="height: 3rem;background-image: url('/assets/header.jpg');"
  >
    <img
      slot="start"
      style="width: 1.7rem; transform: scale(1.7);margin-top:-1rem;margin-left: 0.4rem;"
      src="/assets/logo.jpg"
    />
    <ion-grid fixed style="margin-top: -1rem;">
      <ion-row style="text-align: center;">
        <ion-col size="4">
          <ion-button routerLink="/sort" fill="clear">
            <ion-icon name="list-circle-outline"></ion-icon>&nbsp;
            <span>分 类</span>
          </ion-button>
        </ion-col>
        <ion-col size="4">
          <ion-button routerLink="/ranking" fill="clear">
            <ion-icon name="podium-outline"></ion-icon>&nbsp;
            <span>排行榜</span>
          </ion-button>
        </ion-col>
        <ion-col size="4">
          <ion-button routerLink="/search" fill="clear">
            <ion-icon name="search-outline"></ion-icon>&nbsp;
            <span>搜 索</span>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-header>
<ion-content *ngIf="res" overflow-scroll="true">
  <ion-slides
    [options]="{autoplay: {delay:2500, disableOnInteraction:false}, loop:true}"
  >
    <ion-slide *ngFor="let banner of res.results">
      <ion-card [routerLink]="['/phdetail',{title:banner.title}]">
        <img [src]="banner.img" alt="" />
        <ion-item>
          <ion-label>{{banner.shortIntro}}</ion-label>
        </ion-item>
      </ion-card>
    </ion-slide>
  </ion-slides>
  <ion-list *ngIf="books">
    <ion-item
      *ngFor="let item of books.results; let i=index"
      style="border-bottom: 1px solid #999;"
      [routerLink]="['/phdetail',{title:item.title}]"
    >
      <img
        [src]="item.cover"
        alt=""
        style="width: 5em;border-radius: 0.2em;margin: 0.5em;"
      />

      <ion-label>
        <h2 style="margin-top: -0.1em;">{{item.title}}</h2>
        <p style="font-size: 0.7em;color: gray;">
          {{item.author}} | {{item.majorCate}} | {{item.minorCate}}
        </p>
        <h3>{{item.shortIntro}}</h3>
      </ion-label>
    </ion-item>
  </ion-list>
  <h6 align="center" style="color: gray;">没有了呦</h6>
</ion-content>
